<!--
    @license
    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
    Code distributed by Google as part of the polymer project is also
    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../components/core-media-query/core-media-query.html">
<script src="../../js/dynamics.js"></script>

<polymer-element name="app-drawer" attributes="active mobile">
  <template>
    <style>
      :host {
        position: fixed;
        height: 100%;
      }

      #content {
        width: 265px;
        height: 100%;
        background-color: #EEE;
        /*overflow-y: scroll;*/
      }

      :host([mobile]) {
        position: static;
      }

      :host([mobile]) #content {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 315px
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        z-index: 3;
      }

      :host([mobile]) #mask {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: black;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        z-index: 2;
      }
    </style>
    <core-media-query query="max-width: 850px" queryMatches="{{mobile}}"></core-media-query>
    <div id="mask" on-tap="{{ toggle }}"></div>
    <div id="content">
      <content></content>
    </div>
  </template>
  <script>
    Polymer({
      publish: {
        mobile: {value: false, reflect: true}
      },
      active: false,
      controller: null,
      toggle: function() {
        this.controller.toggle();
      },
      close: function() {
        this.controller.close();
      },
      attached: function() {
        var content = this.$.content;
        var mask = this.$.mask;
        this.controller = new DrawerController({
          target: this,
          left: 0,
          right: 315,
          position: 0,
          curve: 'ease-in-out',
          willOpen: function() {
            mask.style.display = 'block';
            content.style.display = 'block';
            this.active = true;
            document.body.classList.add('noscroll');
          },
          didClose: function() {
            mask.style.display = 'none';
            content.style.display = 'none';
            this.active = false;
            document.body.classList.remove('noscroll');
          },
          onAnimate: function(position) {
            // FIXME: We should animate the opacity from zero, but that triggers http://crbug.com/328106
            mask.style.opacity = ((position + 1) / 315) * 0.2;
            content.style.WebkitTransform = 'translate3d(' + (position - 315) + 'px,0,0)';
          }
        });
      },
      mobileChanged: function() {
        // Force the app-drawer to reset its initial state when
        // mobile is false. This is for when someone resizes their
        // browser from mobile -> desktop
        if (this.controller && !this.mobile) {
          this.$.mask.removeAttribute('style');
          this.$.content.removeAttribute('style');
          this.controller.state = this.controller.kClosed;
          this.controller.position = 0;
          this.controller.left = 0;
          this.controller.right = 315;
          this.active = false;
          document.body.classList.remove('noscroll');
        }
      }
    });
  </script>
</polymer-element>
